通過具體範例展示如何使用 Grid 實現不同佈局，並詳細講解代碼，幫助你作為全端工程師深入理解 Grid 的應用。這些範例涵蓋簡單網格、響應式佈局和複雜頁面結構，旨在讓你掌握 Grid 的基礎和實戰技巧。每個範例都會包含 HTML 和 CSS 代碼，並解釋關鍵屬性及設計思路。

範例 1：簡單 3x2 網格（圖片庫）
這個範例展示如何用 Grid 創建一個簡單的圖片庫，自動適應不同螢幕大小。
HTML
html
圖片 1
圖片 2
圖片 3
圖片 4
圖片 5
圖片 6

.item {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
講解

grid-template-columns: repeat(3, 1fr);：創建 3 列，每列佔等比例剩餘空間（1fr 表示 1 份自由空間）。
grid-template-rows: auto;：行高根據內容自動調整。
gap: 15px;：統一設置行和列間距。
效果：6 個項目排列成 3 列 x 2 行的網格，適合展示圖片或卡片。

響應式改進
讓網格在小螢幕上自動調整列數：
css.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 動態列數，至少 150px */
gap: 15px;
padding: 20px;
}

repeat(auto-fit, minmax(150px, 1fr))：根據容器寬度自動調整列數，每列至少 150px，最大佔滿剩餘空間。
效果：在手機上可能變為 1 或 2 列，桌面為 3 或更多列，實現響應式。

範例 2：頁面框架（側邊欄 + 主內容）
這個範例展示如何用 Grid 創建一個典型的頁面佈局，包含側邊欄、頁頭、主內容和頁腳。
HTML
html
頁頭
側邊欄
主要內容
頁腳

.header { grid-area: header; background-color: #e0f7fa; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #ffebee; padding: 20px; }
.main { grid-area: main; background-color: #fff3e0; padding: 20px; }
.footer { grid-area: footer; background-color: #e8f5e9; padding: 20px; }
講解

grid-template-columns 和 grid-template-rows：定義 2 列（側邊欄固定寬度，主內容靈活）和 3 行（頁頭/頁腳自動高度，主內容佔滿）。
grid-template-areas：用命名區域定義佈局，直觀指定每個元素的位置。
min-height: 100vh;：確保佈局佔滿視窗高度。
效果：側邊欄固定在左側，頁頭、主內容和頁腳垂直排列，適合作為網站主結構。

響應式改進
在手機上將側邊欄隱藏或堆疊：
css@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* 單列 /
grid-template-areas:
"header"
"main"
"footer";
/ 隱藏側邊欄 */
.sidebar { display: none; }
}
}

效果：手機上只顯示頁頭、主內容和頁腳，垂直排列。

範例 3：複雜網格（儀表板）
這個範例展示如何用 Grid 創建一個儀表板，包含多個不同大小的區域，支援項目跨行/列。
HTML
html
統計圖表
通知
近期活動
用戶資料

.widget {
background-color: #f5f5f5;
padding: 15px;
border: 1px solid #ddd;
}

.widget1 { grid-column: 1 / 3; grid-row: 1 / 3; } /* 跨 2 列 2 行 /
.widget2 { grid-column: 3 / 5; grid-row: 1 / 1; } / 跨 2 列 1 行 /
.widget3 { grid-column: 3 / 4; grid-row: 2 / 2; } / 佔 1 列 1 行 /
.widget4 { grid-column: 4 / 5; grid-row: 2 / 2; } / 佔 1 列 1 行 */
講解

grid-column / grid-row：指定項目跨越的網格線。例如，grid-column: 1 / 3; 表示從第 1 線到第 3 線（跨 2 列）。
佈局：

widget1 佔左側大塊（2x2）。
widget2 佔右上（2x1）。
widget3 和 widget4 佔右下（各 1x1）。

效果：模擬儀表板，適合展示不同大小的資料組件。

響應式改進
在小螢幕上將項目堆疊：
css@media (max-width: 600px) {
.dashboard {
grid-template-columns: 1fr; /* 單列 /
grid-template-rows: auto; / 自動行數 /
}
.widget1, .widget2, .widget3, .widget4 {
grid-column: 1 / 2; / 全部佔單列 /
grid-row: auto; / 自動分配行 */
}
}

效果：所有 widget 垂直排列，適合手機顯示。

進階技巧與實戰建議

使用 minmax 增強靈活性：
cssgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

動態調整列數，確保每列至少 200px，適合響應式圖片庫或卡片。

命名網格線：
css.container {
grid-template-columns: [start] 200px [main] 1fr [end];
grid-template-rows: [top] auto [middle] 1fr [bottom];
}
.header { grid-column: start / end; }

為網格線命名，簡化複雜佈局的定位。

隱式網格：
cssgrid-auto-rows: 100px; /* 隱式行固定 100px */

當項目超出顯式網格時，自動生成行。

與 Flexbox 結合：

在 Grid 單元格內使用 Flexbox 排版內容：
css.item {
display: flex;
justify-content: center;
align-items: center;
}

調試與工具：

使用 Chrome DevTools 的 Grid Inspector 查看網格線和區域。
試用線上工具如 CSS Grid Generator 生成複雜佈局。

常見問題與解決

項目溢出：檢查 grid-template-columns 是否使用了固定單位（如 px），改用 fr 或 minmax。
間距不均：確保 gap 設置正確，避免使用 margin 干擾網格。
老舊瀏覽器：Grid 在 IE11 支援有限，可用 @supports (display: grid) 提供回退：
css@supports not (display: grid) {
.container { display: flex; flex-wrap: wrap; }
}